<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="follows" v-cloak :loading="loading">
        <div v-if="!showForm">
            <div class="tools">
                <el-button plain style="margin-right:6px;" size="small" icon="el-icon-refresh" @click="loadItems">
                    刷新</el-button>
                <!-- <el-button type="primary" size="small" @click="newFormHandle" round> 写跟进</el-button> -->
            </div>
            <el-divider></el-divider>

            <el-timeline>
                <el-timeline-item v-for="(item, index) in items" :key="item.id">
                    <el-tag type="default" size="mini" v-if="item.status">{{ item.status.name }}</el-tag>
                    <span style="color:#999999;font-size:12px;">{{ item.timestamp }}</span>
                    <br>
                    <div style="color:#333;font-weight:bolder;margin:10px auto;padding:10px;border-radius:4px;">{{
                        item.content }}</div>
                </el-timeline-item>
            </el-timeline>

            <div v-if="items.length == 0" class="empty">还没有跟进日志</div>

        </div>

        <!-- <div v-if="showForm" style="margin-left:40px;">
            <el-form label-position="top" label-width="80px" :loading="loading">
                <el-form-item label="跟进内容">
                    <el-input v-model="formData.content" type="textarea" style="width:400px;" placeholder="请输入跟进内容"
                        size="big" :maxlength="200" :minlength="6" :rows="5" :show-word-limit="true" />
                </el-form-item>
                <el-form-item label="标记状态">
                    <status-selector custom-style="width:400px;" size="big" v-model="formData.status_id" />
                </el-form-item>
                <el-form-item>
                    <el-button :disabled="!canSubmit" :loading="loading" type="primary"
                        @click="submitHandle">提交保存</el-button>
                    <el-link style="margin-left:20px;" type="primary" @click="cancleHandle">取消</el-link>
                </el-form-item>
            </el-form>
        </div> -->
    </div>
</template>

<script>
import StatusSelector from "./StatusSelector";
import { createFollow, getFollowList } from "@/api/clue-follow";
import filters from '@/utils/filters'
export default {
    data () {
        return {
            loading: false,
            showForm: false,
            formData: {
                id: "",
                content: "",
                status_id: "",
            },
            items: [],
        };
    },
    components: {
        StatusSelector,
    },
    props: {
        clueId: { type: Number, default: null },
    },

    mounted: function () { },
    watch: {
        clueId: {
            immediate: true,
            deep: true,
            handler (val, oval) {
                if (!val) {
                    return false;
                }
                this.loadItems();
            },
        },
    },

    computed: {
        canSubmit: function () {
            // 可点击提交
            var f = this.formData
            if (!f.content || f.content.length < 5) {
                return false
            }
            if (!f.status_id) {
                return false
            }
            return true
        },
    },

    methods: {
        newFormHandle: function () {
            this.formData = { content: "", status_id: null };
            this.showForm = true;
        },

        cancleHandle: function () {
            this.formData = { content: "", status_id: null };
            this.showForm = false;
            this.loadItems()
        },

        loadItems: function () {
            this.loading = true;
            getFollowList(this.clueId, "customer").then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    this.items = resp.data.map((item, i) => {
                        var t = filters.utcFormater(item.created_at);
                        item.timestamp = t + "  [" + item.author + "] ";
                        return item;
                    });
                }
            });
        },

        submitHandle: function () {
            // todo vali
            this.loading = true;
            var data = this.formData;
            data.clue_id = this.clueId;
            var _this = this;
            createFollow(data).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    _this.loadItems();
                    _this.$message.success("提交保存成功");
                    _this.$emit("change");
                    _this.showForm = false;
                }
            });
        },
    },
};
</script>

<style scoped>
.tools {
    display: flex;
    justify-content: flex-end;
}

.empty {

    color: #999999;
    height: 200px;
    text-align: center;
}
</style>
